

<script>
import FileUpload from '@/components/FileUpload.vue'
export default {
    props: ['parent'],
    components: {
        FileUpload
    },
    data() {
        return {
            // 自己在SQL中写上去，免得自己忘记了
            resetForm: {
                id: '',
                userName: '',
                userPassword: '',
                userRole: '',
                userProfile: '',
                userAvatar: '',
                userSex: '',
                nickName: '',
                userEmail: '',
                userCredit: '',
                createTime: '',
            },
            form: {
                id: '',
                userName: '',
                userPassword: '',
                userRole: '',
                userProfile: '',
                userAvatar: '',
                userSex: '',
                nickName: '',
                userEmail: '',
                userCredit: '',
                createTime: '',
            },
            rules: {
                userName: [
                    { required: true, message: '账号不能为空', trigger: 'blur' },
                ],
                userPassword: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                ]
            },
            SingleData: '',
            id: '',
            type: '',
            centerDialogVisible: false,         // 外面设置
            canEdit: false,                     // 可编辑的
            imageUrl: '',                       // 头像
        }
    },
    methods: {
        handleClose() {
            this.form = this.resetForm
        },
        // 获取数据
        getForm() {
            this.$http({
                method: 'get',
                url: `/user/get/${this.id}`,
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.form = data.data
                    this.imageUrl = this.form.userAvatar
                } else {
                    this.$message.error("数据不存在,很奇怪")
                }
            })
        },
        // 初始化
        init(type, id) {
            this.id = id
            this.type = type

            if (this.type == 'add') {
                this.canEdit = true      //可编辑
                this.imageUrl = ''

            } else if (this.type == 'update') {
                this.canEdit = true      //可编辑
                this.getForm()

            } else if (this.type == 'detail') {
                this.canEdit = false      //不可编辑

                this.getForm()
            }

        },
        handleUpdateOrAdd() {
            // 添加
            if (this.type == 'add') {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$http({
                            method: 'post',
                            url: '/user/add',
                            data: this.form
                        }).then(({ data }) => {
                            if (data && data.code === 0) {
                                this.$message.success('添加成功')
                                this.centerDialogVisible = false
                                this.parent.getDataList();
                                return true
                            } else {
                                this.$message.error("账号已存在")
                                return false
                            }
                        })
                    } else {
                        this.$message.warning('数据未填写完全')
                    }
                })
                // 修改
            } else if (this.type == 'update') {
                this.$http({
                    method: 'post',
                    url: '/user/update',
                    data: this.form
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.$message.success('修改成功')
                        this.centerDialogVisible = false
                        this.parent.getDataList();
                    } else {
                        this.$message.error("数据不存在,很奇怪")
                    }
                })
            }
        },
        imageUrlChanged(imageUrl) {
            this.form.userAvatar = imageUrl
            this.imageUrl = imageUrl
        }
    }
}
</script>


<template>
    <el-dialog v-model="centerDialogVisible" title="信息界面" width="800" center @close="handleClose" destroy-on-close
        top="3vh">

        <el-form :model="form" ref="form" label-width="120px" :disabled="!canEdit" :rules="rules">

            <el-form-item label="头像：">
                <FileUpload action="file/upload" :imageUrl="imageUrl" @imageUrlChanged="imageUrlChanged" />
            </el-form-item>


            <el-form-item label="账号：" prop="userName">
                <el-input :disabled="type != 'add'" v-model="form.userName" />
            </el-form-item>

            <el-form-item v-if="type == 'add'" label="密码：" prop="userPassword">
                <el-input v-model="form.userPassword" />
            </el-form-item>


            <el-form-item v-if="type != 'add'" label="注册时间：">
                <el-input v-model="form.createTime" />
            </el-form-item>

            <el-form-item label="昵称：">
                <el-input v-model="form.nickName" />
            </el-form-item>

            <el-form-item label="身份证：">
                <el-input v-model="form.userCredit" />
            </el-form-item>

            <el-form-item label="性别：">
                <el-radio-group v-model="form.userSex">
                    <el-radio label="男" value="男" />
                    <el-radio label="女" value="女" />
                    <el-radio label="保密" value="保密" />
                </el-radio-group>
            </el-form-item>

            <el-form-item label="邮箱：">
                <el-input v-model="form.userEmail" />
            </el-form-item>

            <el-form-item label="简介：">
                <el-input v-model="form.userProfile" type="textarea" :rows="3" resize="none" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div style="display: flex; justify-content: center;">
                <el-button v-if="type == 'add' || type == 'update'" type="primary" @click="handleUpdateOrAdd()" size="large"
                    style="width: 100px">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>


<style scoped>
#container {
    width: 550px;
    margin: 0 auto;
    margin-bottom: 100px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>


